<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>爱家-预订</title>
    <link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/css/reset.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link href="/static/css/ihome/main.css" rel="stylesheet">
    <link href="/static/css/ihome/booking.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="top-bar">
            <div class="nav-bar">
                <h3 class="page-title">预 订</h3>
                <a class="nav-btn fl" href="#" onclick="hrefBack();"><span><i
                            class="fa fa-angle-left fa-2x"></i></span></a>
            </div>
        </div>
        <div class="house-info">
            <img src="/static/images/home01.jpg">
            <div class="house-text">
                <h3>房屋标题</h3>
                <p>￥<span>300</span>/晚</p>
            </div>
        </div>
        <div class="select-date">
            <div class="select-date-header">入住时间</div>
            <div class="input-daterange input-group">
                <input type="text" class="input-sm form-control" id="start-date" />
                <span class="input-group-addon">至</span>
                <input type="text" class="input-sm form-control" id="end-date" />
            </div>
        </div>
        <div class="submit-order">
            <span class="order-amount">订单总额：￥<span></span></span>
            <span class="submit-btn">提交订单</span>
        </div>
    </div>
    <div class="popup_con">
        <div class="popup">
            <p>日期有误，请重新选择！</p>
        </div>
        <div class="mask"></div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script>
        function hrefBack() {
            history.go(-1);
        }

        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        function decodeQuery() {
            var search = decodeURI(document.location.search);
            return search.replace(/(^\?)/, '').split('&').reduce(function (result, item) {
                values = item.split('=');
                result[values[0]] = values[1];
                return result;
            }, {});
        }

        function showErrorMsg() {
            $('.popup_con').fadeIn('fast', function () {
                setTimeout(function () {
                    $('.popup_con').fadeOut('fast', function () { });
                }, 1000)
            });
        }

        $(document).ready(function () {
            var queryData = decodeQuery();
            var houseId = queryData["hid"];

            // 获取房屋的基本信息
            $.get("/api/v1/houses/" + houseId, function (resp) {
                if (0 == resp.errno) {
                    $(".house-info>img").attr("src", resp.data.house.image_urls[0]);
                    $(".house-text>h3").html(resp.data.house.title);
                    $(".house-text>p>span").html(resp.data.house.price);
                }else if(resp.errno == "4001") {
                    window.location.href = "/login.html"
                }else{
                    alert(resp.errmsg)
                }
            });

            $(".input-daterange").datepicker({
                format: "yyyy-mm-dd",
                startDate: "today",
                language: "zh-CN",
                autoclose: true
            });

            $(".input-daterange").on("changeDate", function () {
                var startDate = $("#start-date").val();
                var endDate = $("#end-date").val();

                if (startDate && endDate && startDate > endDate) {
                    showErrorMsg();
                } else {
                    var sd = new Date(startDate);
                    var ed = new Date(endDate);
                    days = (ed - sd) / (1000 * 3600 * 24) + 1;
                    var price = $(".house-text>p>span").html();
                    var amount = days * parseFloat(price);
                    $(".order-amount>span").html(amount.toFixed(2) + "(共" + days + "晚)");
                }
            });

            $(".submit-btn").on("click", function (e) {
                if ($(".order-amount>span").html()) {
                    $(this).prop("disabled", true);
                    var startDate = $("#start-date").val();
                    var endDate = $("#end-date").val();
                    var data = {
                        "house_id": houseId,
                        "start_date": startDate,
                        "end_date": endDate
                    };
                    $.ajax({
                        url: "/api/v1/orders",
                        type: "POST",
                        data: JSON.stringify(data),
                        contentType: "application/json",
                        dataType: "json",
                        headers: {
                            "X-CSRFTOKEN": getCookie("csrf_token"),
                        },
                        success: function (resp) {
                            if ("0" == resp.errno) {
                                location.href = "/orders.html";
                            } else{
                                showErrorMsg(resp.errmsg);
                            }
                        }
                    });
                }
            });
        })

    </script>
</body>

</html>